vue
	<!-- MyPage.vue -->  

	<template>  

	  <div>  

	    <header>  

	      <h1>网易云音乐</h1>  

	      <nav>  

	        

	        <ul>  

	          <li><a href="/">发现</a></li>  


	          <li class="active"><a href="#">我的</a></li>  


	        </ul>  

	      </nav>  

	    </header>  

	    <div class="mine-page">  

	      <section class="user-info">  

	        <img src="https://img.meituan.net/avatar/5b43cd6e79a6909eaa4a6f68ae009a9f107756.jpg" alt="用户头像">  

	        <h2>开朗的烤鸭</h2>  

	        <p>我在北京吃烤呀哇咔咔咔咔咔</p>  

	        <button>编辑资料</button>  

	      </section>  

	      <section class="music-list">  

	        <h3>我喜欢的音乐</h3>  
          <br>

	        <ul>  

	          <li v-for="song in songs" :key="song.id">  

	            <a :href="song.url">{{ song.name }} - {{ song.artist }}</a>  

	          </li>  

	        </ul>  

	      </section>  

	    </div>  

	  </div>  

	</template>  

	  

	<script setup>  

	import { ref } from 'vue';  

	  

	// 使用ref来创建响应式数据  

	const songs = ref([  

	  { id: 1, name: '北京欢迎你', artist: '瓜嘉鱼', url: '#' },  

	  { id: 2, name: '迷宫（箫）', artist: '卡查宏', url: '#' },  

    { id: 3, name: '如果可以', artist: '梨笋硕', url: '#' },  
    

	  // 更多歌曲  

	]);  

	</script>  

	  

	<style scoped>  


	  

	.user-info img {  

	  width: 150px;  

	  height: 150px;  

	  border-radius: 50%;  

	}  

	  

	/* 其他样式 */  

	</style>